<template>
  <div class="product-list-content">
    <div class="product-list">
      <div class="product-list-title">
        <span></span>
      </div>
      <div class="select-product-list">
        <a-checkbox-group @change="onCheckboxChange" v-model="checkedValues">
          <a-checkbox v-for="item in productOptions" :value="item.id" :key="item.id">{{item.name}}</a-checkbox>
        </a-checkbox-group>
      </div>
    </div>
    <div class="product-list-desc">
      <a-row>
        <a-col v-for="(item,index) in selectChecked" :key="index" :span="12">
          <a-range-picker
            format="YYYY-MM-DD"
            @change="(value) => onTimeChange(value,index)"
            :value="item.expire"
            valueFormat="YYYY-MM-DD"
            v-if="isSelectTime === true"
          >
            <selectDate :productDate="item.expire" :productTitle="item.name"></selectDate>
          </a-range-picker>
          <selectDate v-else :productDate="item.expire" :productTitle="item.name">
            <slot>
              <span></span>
            </slot>
          </selectDate>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import selectDate from "components/base/selectDate";
import { getArrIntersection } from "assets/js/utils.js";
import moment from "moment";
export default {
  components: {
    selectDate
  },
  data() {
    return {
      selectChecked: [],
      productOptions: [],
      checkedValues: [],
      defaultSelect: []
    };
  },
  props: {
    options: {
      //传递的产品的数组
      type: Array,
      default: () => []
    },
    isSelectTime: {
      type: Boolean,
      default: true
    },
    selectProduct: {
      //选中的产品的数组
      type: Array,
      default: () => []
    }
  },
  methods: {
    onCheckboxChange(checkedValues) {
      this.checkedValues = checkedValues;
      this.selectChecked = getArrIntersection(
        checkedValues,
        this.productOptions
      );
      this.$emit("selectCheckedArr", this.selectChecked);
    },
    onTimeChange(value, index) {
      var startTime = moment(value[0]).format("YYYY-MM-DD");
      var endTime = moment(value[1]).format("YYYY-MM-DD");
      this.productOptions[index].expire = [startTime, endTime];
      this.$emit("updateProductDate", this.productOptions[index]);
    }
  },
  watch: {
    options: {
      handler(newV) {
        this.productOptions = newV;
      },
      deep: true
    },
    selectProduct: {
      handler(newV) {
        this.defaultSelect = newV;
        if (this.defaultSelect.length !== 0) {
          this.onCheckboxChange(this.defaultSelect);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.productOptions = this.options;
    this.defaultSelect = this.selectProduct;
    if (this.defaultSelect.length !== 0) {
      this.onCheckboxChange(this.defaultSelect);
    }
  }
};
</script>

<style lang="stylus" scoped>
.product-list
  padding: 15px 15px 20px 15px
  border: 1px solid #eeeeee
  box-shadow: 0 0 10px #dadada
  border-radius: 3px
  margin-top: 20px
  margin-bottom: 50px
.product-list-title
  font-size: 16px
  color: #333333
  margin-bottom: 25px
  span
    position: relative
    padding: 5px
    z-index: 9
    background: #ebebeb
    display: inline-block
    width: 120px
    height: 10px
  span:after
    content: '产品服务总清单'
    position: absolute
    bottom: 15px
    left: 0px
    width: 100%
    text-align: center
    height: 10px
    z-index: 1
</style>